<template>
  <div class="common-magnifier-view">
    <div class="magnifier-view-container"
         ref="magnifierContainer"
         @mousedown="dragMouseDown"
         @mouseup="dragMouseUp">
      <slot></slot>
    </div>

    <div class="page-tool-box-warp" v-if="isShowTools">
      <div class="btn plus">
        <i class="iconfont icon-fangda" @click="handleClick('plus')"></i>
      </div>
      <div class="btn minus">
        <i class="iconfont icon-suoxiao" @click="handleClick('minus')"></i>
      </div>
    </div>

    <!--    <div class="show-container-wrap" ref="showContainer">-->
    <!--      <div class="show-container-main" ref="showContainerMain"></div>-->
    <!--      <div class="show-area" ref="showArea" @mousedown="dragMouseDown" @mouseup="dragMouseUp"></div>-->
    <!--    </div>-->

  </div>
</template>

<script>

export default {
  name: 'index',
  props: {
    scale: {
      type: Number,
      default: 20,
    },//缩略图比例
  },
  data() {
    return {
      isShowTools: true,
      zoom: 1,
      magnifierContainer: null
    }
  },
  methods: {
    //放大缩小展示区域
    handleClick(type) {
      if (type === 'plus') {
        this.zoom = this.zoom === 1 ? 1 : (this.zoom * 100 + 10) / 100
      } else if (type === 'minus') {
        this.zoom = this.zoom === 0.1 ? 0.1 : (this.zoom * 100 - 10) / 100
      }
      this.magnifierContainer.style.transform = `scale(${this.zoom})`
    },
    //拖拽展示区域
    dragMouseDown() {
      let oldPageX, oldPageY, left, top

      //按下事件
      document.onmousedown = event => {
        oldPageX = event.pageX
        oldPageY = event.pageY
        left = this.magnifierContainer.offsetLeft
        top = this.magnifierContainer.offsetTop
      }

      //拖拽事件
      document.onmousemove = event => {
        let { pageX, pageY } = event
        this.magnifierContainer.style.left = `${left - (oldPageX - pageX)}px`
        this.magnifierContainer.style.top = `${top - (oldPageY - pageY)}px`
      }

      //松开事件
      document.onmouseup = event => {
        this.dragMouseUp()
      }
    },
    dragMouseUp() {
      document.onmousemove = null
      document.onmouseup = null
    }
  },
  mounted() {
    this.magnifierContainer = this.$refs.magnifierContainer
  }
}
</script>

<style scoped lang="scss">
.common-magnifier-view {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  background-color: #FFFFFF;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  .magnifier-view-container {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    right: 0;
    bottom: 0;
    transform: scale(.9);
  }

  .page-tool-box-warp {
    position: absolute;
    bottom: 10px;
    left: 8px;
    display: flex;
    flex-direction: column;
    z-index: 199;
    background-color: #FFFFFF;
    border: 1px solid #eee;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);

    .btn {
      width: 24px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #FFFFFF;

      i {
        cursor: pointer;
        font-size: 12px;
      }
    }

    .plus {
      border-bottom: 1px solid #eeeeee;
    }
  }
}
</style>